<template>
  <div id="app">
    <el-config-provider>
      <router-view />
    </el-config-provider>
  </div>
</template>

<script setup>
import { ElConfigProvider } from 'element-plus'
import { useUserStore } from '@/store/user'
import { onMounted } from 'vue'

const userStore = useUserStore()

onMounted(() => {
  // Initialize user info when app starts
  if (userStore.isLoggedIn && !userStore.userInfo) {
    // Try to restore user info from localStorage
    const storedUser = localStorage.getItem('user')
    if (storedUser) {
      try {
        const userData = JSON.parse(storedUser);
        userStore.$patch({ userInfo: userData });
        // Special handling for admin user (not in DB)
      if (userData.username === 'admin') {
        // Admin user is managed in memory and localStorage only
        // No need to fetch from server
        console.log('Admin user restored from localStorage');
      } else {          // For regular users, refresh data from server
        userStore.getUserInfo().catch(error => {
          console.error('Failed to refresh user info:', error);
          // On error, ensure we still have the localStorage data
          userStore.$patch({ userInfo: userData });
        });
      }
      } catch (error) {
        console.error('Failed to parse stored user data:', error);
        // Clear invalid data
        localStorage.removeItem('user');
        localStorage.removeItem('token');
        localStorage.removeItem('userId');
      }
    }
  }})

</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}

#app {
  height: 100%;
}
</style> 